<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>photo-add</title>
    <style>
        /** { margin: 0; padding: 0; list-style: none; box-sizing: border-box; -webkit-appearance: none; }*/
        body {
            background: #212f3d;
            max-width: 1100px;
            margin: auto;
            padding: 6px;
            /*border: 1px solid lightgrey;*/
        }

        .liked path {
            fill: red; /* 实心的颜色 */
        }

        .imgs {
            display: block;
            margin: 0 auto;
        }

        #like_count {
            font-size: 22px;
            color: whitesmoke;
        }

        /*    大屏幕     */
        @media screen and (min-width: 769px) {
            .imgs {
                width: 50%;
            }
        }

        /*    小屏幕     */
        @media screen and (max-width: 768px) {
            .imgs {
                width: 80%;
            }
        }

        #imageContainer img {
            margin-right: 12px;
        }

        button {
            background: #212f3d;
            color: whitesmoke;
            font-size: 20px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.3s ease;
            padding: 12px 30px;
        }

        button:hover {
            background: #2092e0;
        }

        input{
            background: #212f3d;
            color: whitesmoke;
            font-size: 20px;
            transition: background 0.3s ease;
            padding: 12px;
            width: 866px;
        }

        textarea {
            padding: 12px;
            font-size: 20px;
            width: 100%;
            height: 200px;
            background: #212f3d;
            color: whitesmoke;
        }
    </style>
</head>
<body>
<div th:replace="~{common-page/header.html :: myheader}"></div>

<h1>photo-add.html</h1>

<button id="uploadButton">Upload</button>
<input id="title_input"/> <br> <br>
<textarea id="description_input"></textarea>
<br><br>
<input type="file" name="uploadFiles" id="fileInput" accept="image/*" value="请选择文件" multiple style="color: whitesmoke;">
<br><br>
<div id="imageContainer"></div>


<br><br><br><br><br><br><br><br>

</body>
<script th:inline="javascript">
    // let all_data = [[${qqSpaceDTO}]];
    // console.log(all_data);

    const fileInput = document.getElementById('fileInput');
    const imageContainer = document.getElementById('imageContainer');

    fileInput.addEventListener('change', function () {
        imageContainer.innerHTML = ''; // 清空容器
        for (let i = 0; i < fileInput.files.length; i++) {
            const file = fileInput.files[i];
            const reader = new FileReader();
            reader.onload = function (e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.maxWidth = '200px'; // 设置图片的最大宽度
                img.style.maxHeight = '200px'; // 设置图片的最大高度
                imageContainer.appendChild(img);
            }
            reader.readAsDataURL(file);
        }
    });

    document.getElementById('uploadButton').addEventListener('click', () => {
        const titleInput = document.getElementById('title_input').value;
        const textareaInput = document.getElementById('description_input').value;
        const fileInput = document.getElementById('fileInput').files;

        // Create a FormData object
        const formData = new FormData();
        formData.append('title', titleInput);
        formData.append('description', textareaInput);

        // Append files to FormData
        for (const file of fileInput) {
            formData.append('files', file);
        }

        fetch('/photo-add/upload', {  // Replace with your endpoint URL
            method: 'POST',
            body: formData
        })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => {
                        throw new Error(text)
                    });
                }
                return response.json();
            })
            .then(data => {
                console.log(data);
                if (data.length > 0) {
                    alert('上传成功');
                    location.reload();  // 刷新页面
                } else {
                    alert('上传失败');
                }
                for (let ii of data) {
                    console.log(ii);
                }
            })
            .catch((error) => {
                console.error('Error:', error);
                // alert(error, "可能是文件过大了")
            });
    });
</script>

</html>